<template>
  <div class="footer-view" :style="{backgroundColor:bgColor}">
    <div v-for="(item,i) in navItems" :key="item._uid" class="nav-item">
      <img :src="require(`../../../../../assets/icons/tab-icon/tab${i+1}_${i===0?2:1}.png`)" alt="">
      <div class="text" :style="{color:(activeIndex===i)?activeFontColor:defaultFontColor}">{{ item.text }}</div>
    </div>
  </div>
</template>
<script>
export default {
  name: 'FooterView',
  props: {
    options: {
      type: Object,
      default: null
    }
  },
  data() {
    return {
      activeIndex: 0
    }
  },
  computed: {
    navItems() {
      return this.options.navItems
    },
    defaultFontColor() {
      return this.options.fontColor.default
    },
    activeFontColor() {
      return this.options.fontColor.active
    },
    bgColor() {
      return this.options.bgColor
    }
  }
}
</script>
<style lang="scss" scoped>
.footer-view{
  display: flex;
  align-items: center;
  justify-content: space-evenly;
  height: 100%;
}
.text{
  font-size: 12px;
}
img{
  width: 24px;
  height: 24px;
}
</style>
